<template>
    <!--个人详情页面-->
  <div class="student-detail page-container">
    <div class="bg">
      <div class="header">
        <button class="back-button" @click="goBack">
          <i class="el-icon-arrow-left"></i> 返回
        </button>
        <h2 v-if="student">{{ student.name }}的个人档案</h2>
        <h2 v-else>学生详情</h2>
      </div>

      <div v-if="loading" class="loading">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <div v-else-if="!student" class="not-found">
        <p>未找到学生信息</p>
        <button class="back-button" @click="goBack">返回列表</button>
      </div>

      <div v-else class="detail-content">
        <!-- 基本信息卡片 -->
        <div class="info-card basic-info">
          <div class="card-header">
            <h3>基本信息</h3>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="label">姓名：</span>
              <span class="value">{{ student.name }}</span>
            </div>
            <div class="info-item">
              <span class="label">学号：</span>
              <span class="value">{{ student.virtualStudentId }}</span>
            </div>
            <div class="info-item">
              <span class="label">组别：</span>
              <span class="value">{{ student.groupName || '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="label">班级：</span>
              <span class="value">{{ student.classes }}</span>
            </div>
            <div class="info-item">
              <span class="label">专业：</span>
              <span class="value">{{ student.major || 'Unknown Major' }}</span>
            </div>
            <div class="info-item">
              <span class="label">年龄：</span>
              <span class="value">{{ student.age || '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="label">政治面貌：</span>
              <span class="value">{{ student.political || '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="label">职务：</span>
              <span class="value">{{ student.position || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">单亲家庭：</span>
              <span class="value">{{ student.singleParent || '否' }}</span>
            </div>
            <div class="info-item">
              <span class="label">双竞：</span>
              <span class="value">{{ student.doubleCompetition || '否' }}</span>
            </div>
            <div class="info-item">
              <span class="label">身份证号：</span>
              <span class="value">{{ maskIdCard(student.idCard) }}</span>
            </div>
          </div>
        </div>

        <!-- 个人五维评估图 -->
        <div class="info-card radar-chart">
          <div class="card-header">
            <h3>个人五维评估图</h3>
          </div>
          <div class="card-body">
            <div ref="radarChart" class="radar-container"></div>
          </div>
        </div>

        <!-- 个人数据变化折线图 -->
        <div class="info-card line-chart">
          <div class="card-header">
            <h3>个人数据变化折线图</h3>
          </div>
          <div class="card-body">
            <div ref="lineChart" class="line-container"></div>
          </div>
        </div>

        <!-- 学习模块 -->
        <div class="info-card dimension-card">
          <div class="card-header dimension-header" @click="toggleDimension('学习')">
            <div class="header-left">
              <h3>学习</h3>
              <div class="study-info-btn-container" @mouseenter="showStudyTooltip" @mouseleave="hideStudyTooltip">
                <button class="study-info-btn">
                  <i class="el-icon-reading"></i>
                </button>
                <div v-show="studyTooltipVisible" class="study-tooltip-popup">
                  {{ studyInfoText }}
                </div>
              </div>
            </div>
            <div class="dimension-stats">
              <span class="dimension-score">权重计算得分: {{ dimensionData.study }}</span>
              <span class="dimension-status" :class="getDimensionStatusClass('学习')">{{ getDimensionStatus('学习') }}</span>
            </div>
            <div class="toggle-icon">
              <i :class="expandedDimensions.学习 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            </div>
          </div>
          <div class="card-body" v-show="expandedDimensions.学习">
            <div class="dimension-content">
              <!-- 学科成绩 -->
              <div class="study-section">
                <h4 class="section-title">学科成绩</h4>
                <div class="table-container">
                  <div class="study-table">
                    <div class="table-header">
                      <div class="table-cell subject-cell">科目</div>
                      <div class="table-cell major-cell">专业</div>
                      <div class="table-cell rank-cell">排名</div>
                      <div class="table-cell score-cell">成绩</div>
                      <div class="table-cell exam-cell">考试节点</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="subjectScores.length === 0" class="no-data">
                        暂无学科成绩数据
                      </div>
                      <div v-else v-for="(score, index) in subjectScores" :key="index" class="table-row">
                        <div class="table-cell subject-cell">{{ score.subject }}</div>
                        <div class="table-cell major-cell">{{ score.major }}</div>
                        <div class="table-cell rank-cell">{{ score.rank }}</div>
                        <div class="table-cell score-cell">{{ score.score }}</div>
                        <div class="table-cell exam-cell">{{ score.examName }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 作业评级登记 -->
              <div class="study-section">
                <h4 class="section-title">作业评级登记</h4>
                <div class="table-container">
                  <div class="study-table">
                    <div class="table-header">
                      <div class="table-cell subject-cell">科目</div>
                      <div class="table-cell grade-cell">作业等级</div>
                      <div class="table-cell class-cell">班级</div>
                      <div class="table-cell group-cell">组别</div>
                      <div class="table-cell node-cell">作业节点</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="homeworkGrades.length === 0" class="no-data">
                        暂无作业评级数据
                      </div>
                      <div v-else v-for="(homework, index) in homeworkGrades" :key="index" class="table-row">
                        <div class="table-cell subject-cell">{{ homework.subject }}</div>
                        <div class="table-cell grade-cell" :class="getHomeworkGradeClass(homework.homeworkGrade)">{{ homework.homeworkGrade }}</div>
                        <div class="table-cell class-cell">{{ homework.classes }}</div>
                        <div class="table-cell group-cell">{{ homework.groupName }}</div>
                        <div class="table-cell node-cell">{{ homework.homeworkNode }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 自主学术讲座 -->
              <div class="study-section">
                <h4 class="section-title">自主学术讲座</h4>
                <div class="table-container">
                  <div class="study-table">
                    <div class="table-header">
                      <div class="table-cell date-cell">日期</div>
                      <div class="table-cell lecture-cell">讲座名称</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="lectures.length === 0" class="no-data">
                        暂无学术讲座数据
                      </div>
                      <div v-else v-for="(lecture, index) in lectures" :key="index" class="table-row">
                        <div class="table-cell date-cell">{{ formatDate(lecture.lectureDate) }}</div>
                        <div class="table-cell lecture-cell">{{ lecture.topic }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 进出图书馆情况 -->
              <div class="study-section">
                <h4 class="section-title">进出图书馆情况</h4>
                <div class="table-container">
                  <div class="study-table">
                    <div class="table-header">
                      <div class="table-cell date-cell">进入日期</div>
                      <div class="table-cell time-cell">进入时间</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="libraryRecords.length === 0" class="no-data">
                        暂无图书馆记录数据
                      </div>
                      <div v-else v-for="(record, index) in libraryRecords" :key="index" class="table-row">
                        <div class="table-cell date-cell">{{ record.enterDate }}</div>
                        <div class="table-cell time-cell">{{ record.enterTime }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 晚加班情况 -->
              <div class="study-section">
                <h4 class="section-title">晚加班情况</h4>
                <div class="table-container">
                  <div class="study-table">
                    <div class="table-header">
                      <div class="table-cell date-cell">日期</div>
                      <div class="table-cell location-cell">加班地点</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="overtimeRecords.length === 0" class="no-data">
                        暂无晚加班记录数据
                      </div>
                      <div v-else v-for="(record, index) in overtimeRecords" :key="index" class="table-row">
                        <div class="table-cell date-cell">{{ formatDate(record.overTime) }}</div>
                        <div class="table-cell location-cell">{{ record.overPlace }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 主动回答问题次数 -->
              <div class="study-section">
                <h4 class="section-title">主动回答问题次数</h4>
                <div class="table-container">
                  <div class="study-table">
                    <div class="table-header">
                      <div class="table-cell course-cell">课程</div>
                      <div class="table-cell count-cell">回答次数</div>
                      <div class="table-cell date-cell">日期</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="questionAnswers.length === 0" class="no-data">
                        暂无回答问题记录数据
                      </div>
                      <div v-else v-for="(answer, index) in questionAnswers" :key="index" class="table-row">
                        <div class="table-cell course-cell">{{ answer.course }}</div>
                        <div class="table-cell count-cell">{{ answer.answerCount }}</div>
                        <div class="table-cell date-cell">{{ formatDate(answer.proactiveDate) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 生活模块 -->
        <div class="info-card dimension-card">
          <div class="card-header dimension-header" @click="toggleDimension('生活')">
            <h3>生活</h3>
            <div class="dimension-stats">
              <span class="dimension-score">权重计算得分: {{ dimensionData.life }}</span>
              <span class="dimension-status" :class="getDimensionStatusClass('生活')">{{ getDimensionStatus('生活') }}</span>
            </div>
            <div class="toggle-icon">
              <i :class="expandedDimensions.生活 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            </div>
          </div>
          <div class="card-body" v-show="expandedDimensions.生活">
            <div class="dimension-content">
              <!-- 饭卡消费 -->
              <div class="life-section">
                <h4 class="section-title">饭卡消费</h4>
                <div class="table-container">
                  <div class="life-table">
                    <div class="table-header">
                      <div class="table-cell time-cell">消费时间</div>
                      <div class="table-cell amount-cell">消费额度</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="cardConsumptions.length === 0" class="no-data">
                        暂无饭卡消费数据
                      </div>
                      <div v-else v-for="(consumption, index) in cardConsumptions" :key="index" class="table-row">
                        <div class="table-cell time-cell">{{ consumption.expendTime }}</div>
                        <div class="table-cell amount-cell">{{ consumption.expendLimit }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 内务得分 -->
              <div class="life-section">
                <h4 class="section-title">内务得分</h4>
                <div class="table-container">
                  <div class="life-table">
                    <div class="table-header">
                      <div class="table-cell date-cell">检查日期</div>
                      <div class="table-cell quality-cell">床铺质量</div>
                      <div class="table-cell placement-cell">物品摆放</div>
                      <div class="table-cell hygiene-cell">卫生擦拭</div>
                      <div class="table-cell score-cell">分数</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="dormitoryScores.length === 0" class="no-data">
                        暂无内务得分数据
                      </div>
                      <div v-else v-for="(score, index) in dormitoryScores" :key="index" class="table-row">
                        <div class="table-cell date-cell">{{ score.checkDate }}</div>
                        <div class="table-cell quality-cell" :class="getQualityClass(score.quality)">{{ score.quality }}</div>
                        <div class="table-cell placement-cell" :class="getQualityClass(score.placement)">{{ score.placement }}</div>
                        <div class="table-cell hygiene-cell" :class="getQualityClass(score.clean)">{{ score.clean }}</div>
                        <div class="table-cell score-cell" :class="getScoreClass(score.score)">{{ score.score }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 公差次数 -->
              <div class="life-section">
                <h4 class="section-title">公差次数</h4>
                <div class="table-container">
                  <div class="life-table">
                    <div class="table-header">
                      <div class="table-cell date-cell">日期</div>
                      <div class="table-cell record-cell">公差记录</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="dutyRecords.length === 0" class="no-data">
                        暂无公差记录数据
                      </div>
                      <div v-else v-for="(record, index) in dutyRecords" :key="index" class="table-row">
                        <div class="table-cell date-cell">{{ record.businessDate }}</div>
                        <div class="table-cell record-cell">{{ record.businessRecord }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 请假 -->
              <div class="life-section">
                <h4 class="section-title">请假</h4>
                <div class="table-container">
                  <div class="life-table">
                    <div class="table-header">
                      <div class="table-cell date-cell">请假日期</div>
                      <div class="table-cell reason-cell">请假原因</div>
                      <div class="table-cell time-cell">请假时间</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="leaveRecords.length === 0" class="no-data">
                        暂无请假记录数据
                      </div>
                      <div v-else v-for="(record, index) in leaveRecords" :key="index" class="table-row">
                        <div class="table-cell date-cell">{{ formatDate(record.leaveDate) }}</div>
                        <div class="table-cell reason-cell">{{ record.reason }}</div>
                        <div class="table-cell time-cell">{{ record.leaveTime }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 外出 -->
              <div class="life-section">
                <h4 class="section-title">外出</h4>
                <div class="table-container">
                  <div class="life-table">
                    <div class="table-header">
                      <div class="table-cell date-cell">外出日期</div>
                      <div class="table-cell duration-cell">外出时长</div>
                      <div class="table-cell destination-cell">外出目的地</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="outingRecords.length === 0" class="no-data">
                        暂无外出记录数据
                      </div>
                      <div v-else v-for="(record, index) in outingRecords" :key="index" class="table-row">
                        <div class="table-cell date-cell">{{ record.outDate }}</div>
                        <div class="table-cell duration-cell">{{ record.outDuration }}</div>
                        <div class="table-cell destination-cell">{{ record.outDestination }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 社交模块 -->
        <div class="info-card dimension-card">
          <div class="card-header dimension-header" @click="toggleDimension('社交')">
            <h3>社交</h3>
            <div class="dimension-stats">
              <span class="dimension-score">权重计算得分: {{ dimensionData.social }}</span>
              <span class="dimension-status" :class="getDimensionStatusClass('社交')">{{ getDimensionStatus('社交') }}</span>
            </div>
            <div class="toggle-icon">
              <i :class="expandedDimensions.社交 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            </div>
          </div>
          <div class="card-body" v-show="expandedDimensions.社交">
            <div class="dimension-content">
              <!-- 参与活动 -->
              <div class="social-section">
                <h4 class="section-title">参与活动</h4>
                <div class="table-container">
                  <div class="social-table">
                    <div class="table-header">
                      <div class="table-cell activity-name-cell">活动名称</div>
                      <div class="table-cell activity-time-cell">活动时间</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="activities.length === 0" class="no-data">
                        暂无参与活动数据
                      </div>
                      <div v-else v-for="(activity, index) in activities" :key="index" class="table-row">
                        <div class="table-cell activity-name-cell">{{ activity.activityName }}</div>
                        <div class="table-cell activity-time-cell">{{ formatDate(activity.activityDate) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 思想模块 -->
        <div class="info-card dimension-card">
          <div class="card-header dimension-header" @click="toggleDimension('思想')">
            <h3>
              思想
              <div class="thought-info-btn-container" @click.stop>
                <button
                  class="thought-info-btn"
                  @mouseenter="thoughtTooltipVisible = true"
                  @mouseleave="thoughtTooltipVisible = false"
                >
                  <i class="el-icon-reading"></i>
                </button>
                <div v-if="thoughtTooltipVisible" class="thought-tooltip-popup">
                  {{ thoughtInfoText }}
                </div>
              </div>
            </h3>
            <div class="dimension-stats">
              <span class="dimension-score">权重计算得分: {{ dimensionData.thought }}</span>
              <span class="dimension-status" :class="getDimensionStatusClass('思想')">{{ getDimensionStatus('思想') }}</span>
            </div>
            <div class="toggle-icon">
              <i :class="expandedDimensions.思想 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            </div>
          </div>
          <div class="card-body" v-show="expandedDimensions.思想">
            <div class="dimension-content">
              <!-- 军容风纪检查 -->
              <div class="thought-section">
                <h4 class="section-title">军容风纪检查</h4>
                <div class="table-container">
                  <div class="thought-table">
                    <div class="table-header">
                      <div class="table-cell time-cell">时间</div>
                      <div class="table-cell reason-cell">原因</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="junrongRecords.length === 0" class="no-data">
                        暂无军容风纪检查数据
                      </div>
                      <div v-else v-for="(record, index) in junrongRecords" :key="index" class="table-row">
                        <div class="table-cell time-cell">{{ formatDate(record.jrfjDate) }}</div>
                        <div class="table-cell reason-cell">{{ record.reason }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 纠察记录 -->
              <div class="thought-section">
                <h4 class="section-title">纠察记录</h4>
                <div class="table-container">
                  <div class="thought-table">
                    <div class="table-header">
                      <div class="table-cell time-cell">时间</div>
                      <div class="table-cell item-cell">事项</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="jiuchaRecords.length === 0" class="no-data">
                        暂无纠察记录数据
                      </div>
                      <div v-else v-for="(record, index) in jiuchaRecords" :key="index" class="table-row">
                        <div class="table-cell time-cell">{{ formatDate(record.picketDate) }}</div>
                        <div class="table-cell item-cell">{{ record.item }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 苞米检查 -->
              <div class="thought-section">
                <h4 class="section-title">苞米检查</h4>
                <div class="table-container">
                  <div class="thought-table">
                    <div class="table-header">
                      <div class="table-cell chat-cell">聊天记录问题</div>
                      <div class="table-cell photo-cell">相册问题</div>
                      <div class="table-cell location-cell">热点位置</div>
                      <div class="table-cell bad-record-cell">不良记录</div>
                      <div class="table-cell wall-cell">翻墙记录</div>
                      <div class="table-cell other-cell">其他</div>
                      <div class="table-cell check-time-cell">检查时间</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="baomiRecords.length === 0" class="no-data">
                        暂无苞米检查数据
                      </div>
                      <div v-else v-for="(record, index) in baomiRecords" :key="index" class="table-row">
                        <div class="table-cell chat-cell" :class="getRecordClass(record.chat)">{{ record.chat || 'None' }}</div>
                        <div class="table-cell photo-cell" :class="getRecordClass(record.photoalbum)">{{ record.photoalbum || 'None' }}</div>
                        <div class="table-cell location-cell" :class="getRecordClass(record.hotissue)">{{ record.hotissue || 'None' }}</div>
                        <div class="table-cell bad-record-cell" :class="getRecordClass(record.badrecord)">{{ record.badrecord || 'None' }}</div>
                        <div class="table-cell wall-cell" :class="getRecordClass(record.climbingrecord)">{{ record.climbingrecord || 'None' }}</div>
                        <div class="table-cell other-cell" :class="getRecordClass(record.other)">{{ record.other || 'None' }}</div>
                        <div class="table-cell check-time-cell">{{ formatDate(record.checktime) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 健康模块 -->
        <div class="info-card dimension-card">
          <div class="card-header dimension-header" @click="toggleDimension('健康')">
            <h3>
              健康
              <div class="health-info-btn-container" @click.stop>
                <button
                  class="health-info-btn"
                  @mouseenter="healthTooltipVisible = true"
                  @mouseleave="healthTooltipVisible = false"
                >
                  <i class="el-icon-reading"></i>
                </button>
                <div v-if="healthTooltipVisible" class="health-tooltip-popup">
                  {{ healthInfoText }}
                </div>
              </div>
            </h3>
            <div class="dimension-stats">
              <span class="dimension-score">权重计算得分: {{ dimensionData.health }}</span>
              <span class="dimension-status" :class="getDimensionStatusClass('健康')">{{ getDimensionStatus('健康') }}</span>
            </div>
            <div class="toggle-icon">
              <i :class="expandedDimensions.健康 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            </div>
          </div>
          <div class="card-body" v-show="expandedDimensions.健康">
            <div class="dimension-content">
              <!-- 体测成绩 -->
              <div class="health-section">
                <h4 class="section-title">体测成绩</h4>
                <div class="table-container">
                  <div class="health-table">
                    <div class="table-header">
                      <div class="table-cell test-name-cell">体测节点</div>
                      <div class="table-cell test-date-cell">体测日期</div>
                      <div class="table-cell run-cell">3000米</div>
                      <div class="table-cell pullup-cell">单杠</div>
                      <div class="table-cell situp-cell">卷腹</div>
                      <div class="table-cell snake-cell">蛇形跑</div>
                      <div class="table-cell parallel-cell">双杠</div>
                      <div class="table-cell score-cell">分数</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="physicalTestRecords.length === 0" class="no-data">
                        暂无体测成绩数据
                      </div>
                      <div v-else v-for="(record, index) in physicalTestRecords" :key="index" class="table-row">
                        <div class="table-cell test-name-cell">{{ record.testNode }}</div>
                        <div class="table-cell test-date-cell">{{ record.testDate }}</div>
                        <div class="table-cell run-cell" :class="getPhysicalGradeClass(record.threeThousand)">{{ record.threeThousand }}</div>
                        <div class="table-cell pullup-cell" :class="getPhysicalGradeClass(record.horizontalBar)">{{ record.horizontalBar }}</div>
                        <div class="table-cell situp-cell" :class="getPhysicalGradeClass(record.crunch)">{{ record.crunch }}</div>
                        <div class="table-cell snake-cell" :class="getPhysicalGradeClass(record.serpentineRun)">{{ record.serpentineRun }}</div>
                        <div class="table-cell parallel-cell" :class="getPhysicalGradeClass(record.parallelBars)">{{ record.parallelBars }}</div>
                        <div class="table-cell score-cell" :class="getScoreClass(record.score)">{{ record.score }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 988就诊 -->
              <div class="health-section">
                <h4 class="section-title">988就诊</h4>
                <div class="table-container">
                  <div class="health-table">
                    <div class="table-header">
                      <div class="table-cell date-cell">日期</div>
                      <div class="table-cell cause-cell">病因</div>
                    </div>
                    <div class="table-body custom-scrollbar">
                      <div v-if="medicalVisitRecords.length === 0" class="no-data">
                        暂无988就诊数据
                      </div>
                      <div v-else v-for="(record, index) in medicalVisitRecords" :key="index" class="table-row">
                        <div class="table-cell date-cell">{{ record.visitDate }}</div>
                        <div class="table-cell cause-cell">{{ record.visitReason || 'None' }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'StudentDetail',
  computed: {
    // 获取当前考试类型的成绩记录
    getExamRecords() {
      if (this.currentExamType === '期末考试') {
        return this.examRecords.qimo;
      } else {
        return this.examRecords.yuekao;
      }
    },
    // 获取当前考试类型的科目列表
    getSubjects() {
      if (this.currentExamType === '期末考试') {
        return ['高等数学', '英语', '道德法治', '历史'];
      } else {
        return ['高等数学成绩', '高等代数成绩', '大学物理成绩'];
      }
    },
    // 获取总分
    getTotalScore() {
      if (this.getExamRecords.length === 0) return 'N/A';
      return this.getExamRecords[0]['总分'] || 'N/A';
    },
    // 获取总分排名
    getTotalRank() {
      if (this.getExamRecords.length === 0) return 'N/A';
      const record = this.getExamRecords[0];
      const allRecords = this.currentExamType === '期末考试' ?
        this.examRecords.qimo : this.examRecords.yuekao;

      // 按总分降序排序
      const sortedRecords = [...allRecords].sort((a, b) => {
        return parseFloat(b['总分']) - parseFloat(a['总分']);
      });

      // 找到当前学生的排名
      const rank = sortedRecords.findIndex(r => r['name'] === record['name']) + 1;
      return rank > 0 ? rank : 'N/A';
    }
  },
  data() {
    return {
      studentId: null,
      student: null,
      dimensionData: null,
      allDimensionData: [], // 所有学生的维度数据，用于计算排名
      medicalRecords: [],
      sportsRecords: [],
      examRecords: {
        yuekao: [],  // 月考成绩
        qimo: []     // 期末考试成绩
      },
      // 学习模块数据
      subjectScores: [], // 学科成绩
      homeworkGrades: [], // 作业评级
      lectures: [], // 自主学术讲座
      libraryRecords: [], // 图书馆记录
      overtimeRecords: [], // 晚加班记录
      questionAnswers: [], // 回答问题记录
      // 社交模块数据
      activities: [], // 参与活动
      // 生活模块数据
      cardConsumptions: [], // 饭卡消费
      dormitoryScores: [], // 内务得分
      dutyRecords: [], // 公差次数
      leaveRecords: [], // 请假
      outingRecords: [], // 外出
      // 思想模块数据
      junrongRecords: [], // 军容风纪检查
      jiuchaRecords: [], // 纠察记录
      baomiRecords: [], // 苞米检查
      // 健康模块数据
      physicalTestRecords: [], // 体测成绩
      medicalVisitRecords: [], // 988就诊
      currentExamType: '期末考试', // 当前选择的考试类型
      loading: true,
      radarChart: null,
      lineChart: null,
      // 维度展开状态
      expandedDimensions: {
        学习: false,
        生活: false,
        社交: false,
        思想: false,
        健康: false
      },
      // 学习模块说明提示
      studyTooltipVisible: false,
      studyInfoText: '',
      // 健康模块说明提示
      healthTooltipVisible: false,
      healthInfoText: '',
      // 思想模块说明提示
      thoughtTooltipVisible: false,
      thoughtInfoText: ''
    };
  },
  created() {
    this.studentId = this.$route.params.id;
  },
  mounted() {
    this.loadStudentData();
    this.loadStudyInfoText();
    this.loadHealthInfoText();
    this.loadThoughtInfoText();
  },
  beforeDestroy() {
    // 销毁图表实例，避免内存泄漏
    if (this.radarChart) {
      this.radarChart.dispose();
    }
    if (this.lineChart) {
      this.lineChart.dispose();
    }
    window.removeEventListener('resize', this.resizeCharts);
  },
  methods: {
    async loadStudentData() {
      this.loading = true;

      try {
        // 加载学生基本信息
        await this.loadBasicInfo();

        // 加载维度数据
        await this.loadDimensionData()

        // 加载医疗记录
        await this.loadMedicalRecords();

        // 加载体育记录
        await this.loadSportsRecords();

        // 加载考试成绩
        await this.loadExamRecords();

        // 加载学习模块数据
        await this.loadStudyModuleData();

        // 加载社交模块数据
        await this.loadSocialModuleData();

        // 加载生活模块数据
        await this.loadLifeModuleData();

        // 加载思想模块数据
        await this.loadThoughtModuleData();

        // 加载健康模块数据
        await this.loadHealthModuleData();

        // 初始化图表 - 使用setTimeout确保DOM完全渲染
        this.$nextTick(() => {
          // 延迟初始化图表，确保DOM已完全渲染
          setTimeout(() => {
            this.initRadarChart();
            this.initLineChart();

            // 添加窗口大小变化监听，以便调整图表大小
            window.addEventListener('resize', this.resizeCharts);

            console.log('图表初始化完成');
          }, 100); // 100ms延迟，确保DOM已渲染
        });
      } catch (error) {
        console.error('加载学生数据出错:', error);
      } finally {
        this.loading = false;
      }
    },

    async loadBasicInfo() {
      try {
        // 使用student.js封装的API获取学生基本信息
        const response = await this.$studentapi.getStudentInfo({
          id: this.studentId
        });

        if (response && response.code === "200" && response.data) {
          // 适配后端返回的数据结构
          this.student = {
            name: response.data.name || '',
            classes: response.data.classes || '',
            virtualStudentId: response.data.studentId || '',
            major: response.data.major || '',
            isLeagueMember: response.data.political === '团员',
            idCard: response.data.identity || '',
            // 其他字段
            gender: response.data.gender || '',
            age: response.data.age || 0,
            political: response.data.political || '',
            singleParent: response.data.singleParent || '',
            doubleCompetition: response.data.doubleCompetition || '',
            position: response.data.position || '',
            groupName: response.data.groupName || '',
            createDate: response.data.createDate || ''
          };

          console.log('当前学生数据:', JSON.stringify(this.student));
        } else {
          console.error('获取学生基本信息失败:', response?.msg || '未知错误');
          this.student = null;
        }
      } catch (error) {
        console.error('加载学生基本信息出错:', error);
        this.student = null;
      }
    },

    async loadDimensionData() {
      if (!this.student) {
        console.warn('无法加载维度数据：学生信息不存在');
        return;
      }

      try {
        console.log('开始加载学生维度数据，学生姓名:', this.student.name);

        // 使用封装好的 API 获取雷达图数据
        const response = await this.$studentapi.getStudentRadarScores({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && response.data) {
          // 处理返回的数据，只使用五个维度的分数
          this.dimensionData = {
            name: this.student.name,
            study: parseFloat(response.data.studyScore) || 60,
            life: parseFloat(response.data.lifeScore) || 60,
            social: parseFloat(response.data.socialScore) || 60,
            thought: parseFloat(response.data.thoughtScore) || 60,
            health: parseFloat(response.data.healthScore) || 60
          };

          // 将当前学生数据添加到所有学生数据中，用于计算排名
          this.allDimensionData = [this.dimensionData];

          console.log('处理后的维度数据:', this.dimensionData);
        } else {
          console.error('获取雷达图数据失败:', response?.msg || '未知错误');
          // 创建默认维度数据
          this.dimensionData = {
            name: this.student.name,
            study: 60,
            life: 60,
            social: 60,
            thought: 60,
            health: 60
          };
          this.allDimensionData = [this.dimensionData];
        }
      } catch (error) {
        console.error('加载学生维度数据出错:', error);
        // 创建默认维度数据
        this.dimensionData = {
          name: this.student.name,
          study: 60,
          life: 60,
          social: 60,
          thought: 60,
          health: 60
        };
        this.allDimensionData = [this.dimensionData];
      }
    },

    async loadMedicalRecords() {
      if (!this.student) return;

      try {
        const response = await fetch('/data/gerendangan/jiankang/988.csv');
        if (response.ok) {
          const csvText = await response.text();
          const records = this.parseCSV(csvText);

          // 查找匹配的医疗记录
          this.medicalRecords = records.filter(r => r.name === this.student.name && r.classes === this.student.classes);
        } else {
          console.error('加载医疗记录失败');
        }
      } catch (error) {
        console.error('加载医疗记录出错:', error);
      }
    },

    // 加载健康模块数据
    async loadHealthModuleData() {
      if (!this.student) return;

      try {
        // 加载体测成绩数据
        await this.loadPhysicalTestRecords();

        // 加载988就诊数据
        await this.loadMedicalVisitRecords();
      } catch (error) {
        console.error('加载健康模块数据出错:', error);
      }
    },

    // 加载体测成绩数据
    async loadPhysicalTestRecords() {
      try {
        // 使用student.js封装的API请求体测数据
        const response = await this.$studentapi.getHealthSportstest({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.physicalTestRecords = response.data.map(item => ({
            testNode: item.testNode || '',
            testDate: item.testDate || '',
            threeThousand: item.threeThousand || '',
            horizontalBar: item.horizontalBar || '',
            crunch: item.crunch || '',
            serpentineRun: item.serpentineRun || '',
            parallelBars: item.parallelBars || '',
            score: item.score || '',
            classes: item.classes || '',
            groupName: item.groupName || ''
          }));
        } else {
          this.physicalTestRecords = [];
        }
      } catch (error) {
        console.error('获取体测数据失败:', error);
        this.physicalTestRecords = [];
      }
    },

    // 加载988就诊数据
    async loadMedicalVisitRecords() {
      try {
        // 使用student.js封装的API请求就诊数据
        const response = await this.$studentapi.getHealthVisitdoctor({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.medicalVisitRecords = response.data.map(item => ({
            visitDate: item.visitDate || '',
            visitTime: item.visitTime || '',
            visitReason: item.visitReason || 'None',
            classes: item.classes || '',
            groupName: item.groupName || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.medicalVisitRecords = [];
        }
      } catch (error) {
        console.error('获取就诊数据失败:', error);
        this.medicalVisitRecords = [];
      }
    },

    async loadSportsRecords() {
      if (!this.student) return;

      try {
        const response = await fetch('/data/sport.csv');
        if (response.ok) {
          const csvText = await response.text();
          const records = this.parseCSV(csvText);

          // 查找匹配的体育记录
          const studentRecords = records.filter(r => r.name === this.student.name && r.classes === this.student.classes);

          // 处理数据，将引体向上和三千米分开存储
          this.sportsRecords = [];

          // 查找学生的引体向上记录
          const pullUpRecord = studentRecords.find(r => r.引体 !== undefined && r.引体 !== '');
          if (pullUpRecord) {
            this.sportsRecords.push({
              项目名称: '引体向上',
              成绩: pullUpRecord.引体,
              序号: pullUpRecord.序号,
              是否及格: pullUpRecord.引体是否及格
            });
          }

          // 查找学生的三千米记录
          const runRecord = studentRecords.find(r => r.三千米 !== undefined && r.三千米 !== '');
          if (runRecord) {
            this.sportsRecords.push({
              项目名称: '3000米',
              成绩: runRecord.三千米,
              序号: runRecord.序号,
              是否及格: runRecord.三千米是否及格
            });
          }

          console.log('处理后的体育记录:', this.sportsRecords);
        } else {
          console.error('加载体育记录失败');
        }
      } catch (error) {
        console.error('加载体育记录出错:', error);
      }
    },

    parseCSV(csvText) {
      try {
        // 先处理可能的行尾符问题，统一使用\n
        // 先将\r\n替换为\n
        const normalizedText = csvText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
        const rows = normalizedText.split('\n');
        const headers = rows[0].split(',').map(h => h.trim());
        const data = [];

        console.log('CSV 文件头部:', headers);
        console.log('专业字段索引:', headers.indexOf('专业'));

        for (let i = 1; i < rows.length; i++) {
          const row = rows[i].trim();
          if (!row) continue;

          // 简单分割，假设没有引号内的逗号
          const simpleValues = row.split(',');

          // 确保值的数量与头部字段数量一致
          while (simpleValues.length < headers.length) {
            simpleValues.push('');
          }

          // 输出当前行数据以便调试
          if (i === 1) {
            console.log('第一行原始数据:', row);
            console.log('第一行分割后的值:', simpleValues);
            console.log('分割后的值数量:', simpleValues.length, '头部字段数量:', headers.length);
          }

          const item = {};

          // 先处理所有字段
          headers.forEach((header, index) => {
            if (index < simpleValues.length) {
              const value = simpleValues[index].trim();

              if (header === '团员') {
                // 团员字段可能是'1'或'是'
                item[header] = value === '1' || value === '是';
              } else {
                item[header] = value;
              }
            } else {
              // 如果值的数量少于头部字段数量，设置为空字符串
              item[header] = '';
            }
          });

          // 特别处理专业字段 - 确保它存在
          const majorIndex = headers.indexOf('专业');
          if (majorIndex >= 0) {
            // 如果是最后一列，特别处理
            if (majorIndex === headers.length - 1 && majorIndex < simpleValues.length) {
              item['专业'] = simpleValues[majorIndex].trim();
            }

            // 输出专业字段的值以便调试
            if (i === 1) {
              console.log('专业字段索引:', majorIndex);
              console.log('专业字段原始值:', simpleValues[majorIndex]);
              console.log('专业字段最终值:', item['专业']);
            }
          }

          data.push(item);
        }

        // 输出第一条数据以便调试
        if (data.length > 0) {
          console.log('解析后的第一条数据:', JSON.stringify(data[0]));
          console.log('数据对象属性:', Object.keys(data[0]).join(', '));
        }

        return data;
      } catch (error) {
        console.error('CSV 解析错误:', error);
        return [];
      }
    },

    initRadarChart() {
      if (!this.dimensionData || !this.$refs.radarChart) {
        console.warn('无法初始化雷达图：', !this.dimensionData ? '维度数据不存在' : '容器不存在');
        return;
      }

      try {
        // 初始化ECharts实例
        this.radarChart = echarts.init(this.$refs.radarChart);

        // 定义五个维度
        const dimensions = ['学习', '生活', '社交', '思想', '健康'];
        const dimensionKeys = ['study', 'life', 'social', 'thought', 'health'];

        // 输出原始维度数据以便调试
        console.log('原始维度数据:', JSON.stringify(this.dimensionData));

        // 确保所有维度值都是数字，并处理特殊情况
        const values = dimensionKeys.map(key => {
          // 获取原始值
          let value = this.dimensionData[key];

          // 输出每个维度的原始值以便调试
          console.log(`维度 ${key} 的原始值:`, value, '类型:', typeof value);

          // 尝试解析为数字
          const parsedValue = parseFloat(value);

          // 如果解析失败或结果为NaN，使用默认值60
          if (isNaN(parsedValue)) {
            console.warn(`维度 ${key} 的值无法解析为数字，使用默认值60`);
            return 60;
          }

          return parsedValue;
        });

        console.log('处理后的雷达图数据:', this.student.name, dimensions, values);

        // 配置雷达图选项
        const option = {
          backgroundColor: 'transparent',
          title: {
            text: '个人五维评估',
            textStyle: {
              color: '#68d8fe',
              fontSize: 22
            },
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              const data = params.data;
              let result = data.name + '<br/>';
              dimensions.forEach((dim, index) => {
                result += dim + ': ' + data.value[index] + '<br/>';
              });
              return result;
            }
          },
          radar: {
            indicator: dimensions.map(name => ({ name, max: 100 })),
            radius: '65%',
            center: ['50%', '55%'],
            splitNumber: 4,
            name: {
              textStyle: {
                color: '#d3d6dd',
                fontSize: 18,
                padding: [3, 5]
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(104, 216, 254, 0.3)'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(104, 216, 254, 0.05)', 'rgba(104, 216, 254, 0.1)']
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(104, 216, 254, 0.3)'
              }
            }
          },
          series: [{
            name: '五维评估',
            type: 'radar',
            data: [{
              value: values,
              name: this.student.name,
              areaStyle: {
                color: 'rgba(104, 216, 254, 0.3)'
              },
              lineStyle: {
                color: '#68d8fe',
                width: 2
              },
              itemStyle: {
                color: '#68d8fe'
              },
              symbolSize: 6
            }]
          }]
        };

        // 应用配置
        this.radarChart.setOption(option);
        console.log('雷达图初始化完成');
      } catch (error) {
        console.error('初始化雷达图时发生错误:', error);
      }
    },

    initLineChart() {
      if (!this.$refs.lineChart || !this.student) return;

      this.lineChart = echarts.init(this.$refs.lineChart);

      // 使用 API 获取个人成绩数据
      this.$studentapi.getStudentAvgScores({
        name: this.student.name,
        classes: this.student.classes
      }).then(response => {
        if (response && response.code === "200" && response.data) {
          // 处理返回的数据
          const examPoints = [];
          const averageScores = [];

          response.data.forEach(item => {
            examPoints.push(item.examName || '未知考试');
            // 保留两位小数
            const score = parseFloat(item.avgScore);
            averageScores.push(isNaN(score) ? 0 : Number(score.toFixed(2)));
          });

          // 如果没有数据，使用默认数据
          if (examPoints.length === 0) {
            examPoints.push('期中考试', '期末考试');
            averageScores.push(85, 88);
          }

          // 计算自适应y轴上下限和步长
          const allData = averageScores.filter(v => typeof v === 'number' && !isNaN(v));
          let minValue = 0, maxValue = 100, interval = 5;
          if (allData.length > 0) {
            minValue = Math.min(...allData);
            maxValue = Math.max(...allData);
            const range = maxValue - minValue;
            if (range <= 10) {
              interval = 2;
            } else if (range <= 20) {
              interval = 5;
            } else {
              interval = 10;
            }
            minValue = Math.floor(minValue / interval) * interval;
            maxValue = Math.ceil(maxValue / interval) * interval;
          }

          const option = {
            backgroundColor: 'transparent',
            title: {
              text: '学习成绩变化趋势',
              textStyle: {
                color: '#68d8fe',
                fontSize: 22
              },
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(params) {
                return params[0].name + '<br/>' +
                       params[0].seriesName + ': ' + params[0].value + '分';
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: examPoints,
              axisLine: {
                lineStyle: {
                  color: 'rgba(104, 216, 254, 0.3)'
                }
              },
              axisLabel: {
                color: '#d3d6dd',
                fontSize: 16,
                rotate: examPoints.length > 4 ? 30 : 0 // 如果考试节点太多，旋转标签
              }
            },
            yAxis: {
              type: 'value',
              name: '平均分',
              min: minValue,
              max: maxValue,
              interval: interval,
              axisLine: {
                lineStyle: {
                  color: 'rgba(104, 216, 254, 0.3)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(104, 216, 254, 0.1)'
                }
              },
              axisLabel: {
                color: '#d3d6dd',
                fontSize: 16,
                formatter: function(value) {
                  return value.toFixed(1);
                }
              }
            },
            series: [{
              data: averageScores,
              type: 'line',
              smooth: true,
              name: '平均分',
              lineStyle: {
                color: '#68d8fe',
                width: 3
              },
              itemStyle: {
                color: '#68d8fe'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(104, 216, 254, 0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(104, 216, 254, 0.05)'
                  }]
                }
              },
              markPoint: {
                data: [
                  { type: 'max', name: '最高分' },
                  { type: 'min', name: '最低分' }
                ],
                itemStyle: {
                  color: '#68d8fe'
                }
              }
            }]
          };

          this.lineChart.setOption(option);
        } else {
          console.error('获取个人成绩失败:', response?.msg || '未知错误');
          // 使用默认数据
          this.initDefaultLineChart();
        }
      }).catch(error => {
        console.error('获取个人成绩出错:', error);
        // 使用默认数据
        this.initDefaultLineChart();
      });
    },

    // 初始化默认折线图数据
    initDefaultLineChart() {
      const examPoints = ['期中考试', '期末考试'];
      const averageScores = [85, 88];

      // 计算自适应y轴上下限和步长
      const allData = averageScores.filter(v => typeof v === 'number' && !isNaN(v));
      let minValue = 0, maxValue = 100, interval = 5;
      if (allData.length > 0) {
        minValue = Math.min(...allData);
        maxValue = Math.max(...allData);
        const range = maxValue - minValue;
        if (range <= 10) {
          interval = 2;
        } else if (range <= 20) {
          interval = 5;
        } else {
          interval = 10;
        }
        minValue = Math.floor(minValue / interval) * interval;
        maxValue = Math.ceil(maxValue / interval) * interval;
      }

      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '学习成绩变化趋势',
          textStyle: {
            color: '#68d8fe',
            fontSize: 22
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            return params[0].name + '<br/>' +
                   params[0].seriesName + ': ' + params[0].value + '分';
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: examPoints,
          axisLine: {
            lineStyle: {
              color: 'rgba(104, 216, 254, 0.3)'
            }
          },
          axisLabel: {
            color: '#d3d6dd',
            fontSize: 16
          }
        },
        yAxis: {
          type: 'value',
          name: '平均分',
          min: minValue,
          max: maxValue,
          interval: interval,
          axisLine: {
            lineStyle: {
              color: 'rgba(104, 216, 254, 0.3)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(104, 216, 254, 0.1)'
            }
          },
          axisLabel: {
            color: '#d3d6dd',
            fontSize: 16,
            formatter: function(value) {
              return value.toFixed(1);
            }
          }
        },
        series: [{
          data: averageScores,
          type: 'line',
          smooth: true,
          name: '平均分',
          lineStyle: {
            color: '#68d8fe',
            width: 3
          },
          itemStyle: {
            color: '#68d8fe'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(104, 216, 254, 0.3)'
              }, {
                offset: 1,
                color: 'rgba(104, 216, 254, 0.05)'
              }]
            }
          },
          markPoint: {
            data: [
              { type: 'max', name: '最高分' },
              { type: 'min', name: '最低分' }
            ],
            itemStyle: {
              color: '#68d8fe'
            }
          }
        }]
      };

      this.lineChart.setOption(option);
    },

    resizeCharts() {
      if (this.radarChart) {
        this.radarChart.resize();
      }
      if (this.lineChart) {
        this.lineChart.resize();
      }
    },

    // 加载考试成绩数据
    async loadExamRecords() {
      if (!this.student) return;

      try {
        // 加载月考成绩
        const yuekaoResponse = await fetch('/data/Examresults/yuekao1.csv');
        if (yuekaoResponse.ok) {
          const csvText = await yuekaoResponse.text();
          const records = this.parseCSV(csvText);

          // 查找匹配的学生成绩
          this.examRecords.yuekao = records.filter(r => r.name === this.student.name && r.classes === this.student.classes);
          console.log('月考成绩:', this.examRecords.yuekao);
        } else {
          console.error('加载月考成绩失败');
        }

        // 加载期末考试成绩
        const qimoResponse = await fetch('/data/Examresults/qimo1.csv');
        if (qimoResponse.ok) {
          const csvText = await qimoResponse.text();
          const records = this.parseCSV(csvText);

          // 查找匹配的学生成绩
          this.examRecords.qimo = records.filter(r => r.name === this.student.name && r.classes === this.student.classes);
          console.log('期末考试成绩:', this.examRecords.qimo);
        } else {
          console.error('加载期末考试成绩失败');
        }
      } catch (error) {
        console.error('加载考试成绩出错:', error);
      }
    },

    // 获取科目排名
    getSubjectRank(subject) {
      if (this.getExamRecords.length === 0) return 'N/A';

      const record = this.getExamRecords[0];
      const allRecords = this.currentExamType === '期末考试' ?
        this.examRecords.qimo : this.examRecords.yuekao;

      // 按科目成绩降序排序
      const sortedRecords = [...allRecords].sort((a, b) => {
        return parseFloat(b[subject]) - parseFloat(a[subject]);
      });

      // 找到当前学生的排名
      const rank = sortedRecords.findIndex(r => r['name'] === record['name']) + 1;
      return rank > 0 ? rank : 'N/A';
    },

    getMajorCode(studentId) {
      if (!studentId) return '';

      // 学号第一位数字表示专业
      // 1,2,4,5 = 信工专业
      // 6 = 人工专业
      // 7 = 水声专业
      const firstDigit = studentId.charAt(0);

      if (firstDigit === '6') return 'rg';
      if (firstDigit === '7') return 'ss';
      return 'xg';
    },

    getMajorLabel(studentId) {
      const majorCode = this.getMajorCode(studentId);

      switch (majorCode) {
        case 'rg': return '人工专业';
        case 'ss': return '水声专业';
        case 'xg': return '信工专业';
        default: return '未知专业';
      }
    },

    maskIdCard(idCard) {
      if (!idCard || idCard.length < 18) return idCard;
      return idCard.substring(0, 6) + '********' + idCard.substring(14);
    },

    // 切换维度模块的展开/收起状态
    toggleDimension(dimension) {
      this.expandedDimensions[dimension] = !this.expandedDimensions[dimension];
    },

    // 获取维度状态评价
    getDimensionStatus(dimension) {
      if (!this.dimensionData) return '未知';

      // 将中文维度名称映射到英文属性名
      const dimensionMap = {
        '学习': 'study',
        '生活': 'life',
        '社交': 'social',
        '思想': 'thought',
        '健康': 'health'
      };

      const key = dimensionMap[dimension];
      if (!key) return '未知';

      const score = this.dimensionData[key];
      if (score >= 80) return '无风险';
      if (score >= 70) return '低风险';
      if (score >= 60) return '中风险';
      return '高风险';
    },

    // 获取维度状态的CSS类
    getDimensionStatusClass(dimension) {
      if (!this.dimensionData) return '';

      // 将中文维度名称映射到英文属性名
      const dimensionMap = {
        '学习': 'study',
        '生活': 'life',
        '社交': 'social',
        '思想': 'thought',
        '健康': 'health'
      };

      const key = dimensionMap[dimension];
      if (!key) return '';

      const score = this.dimensionData[key];
      if (score >= 80) return 'status-good';
      if (score >= 70) return 'status-normal';
      if (score >= 60) return 'status-low-risk';
      return 'status-risk';
    },

    // 加载学习模块数据
    async loadStudyModuleData() {
      if (!this.student) return;

      try {
        // 加载学科成绩
        await this.loadSubjectScores();

        // 加载作业评级
        await this.loadHomeworkGrades();

        // 加载自主学术讲座
        await this.loadLectures();

        // 加载图书馆记录
        await this.loadLibraryRecords();

        // 加载晚加班记录
        await this.loadOvertimeRecords();

        // 加载回答问题记录
        await this.loadQuestionAnswers();
      } catch (error) {
        console.error('加载学习模块数据出错:', error);
      }
    },

    // 加载社交模块数据
    async loadSocialModuleData() {
      if (!this.student) return;

      try {
        // 加载参与活动数据
        await this.loadActivities();
      } catch (error) {
        console.error('加载社交模块数据出错:', error);
      }
    },

    // 加载生活模块数据
    async loadLifeModuleData() {
      if (!this.student) return;

      try {
        // 加载饭卡消费数据
        await this.loadCardConsumptions();

        // 加载内务得分数据
        await this.loadDormitoryScores();

        // 加载公差次数数据
        await this.loadDutyRecords();

        // 加载请假数据
        await this.loadLeaveRecords();

        // 加载外出数据
        await this.loadOutingRecords();
      } catch (error) {
        console.error('加载生活模块数据出错:', error);
      }
    },

    // 加载饭卡消费数据
    async loadCardConsumptions() {
      try {
        // 使用student.js封装的API请求饭卡消费数据
        const response = await this.$studentapi.getLifeMealcard({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.cardConsumptions = response.data.map(item => ({
            expendTime: item.expendTime || '',
            expendLimit: item.expendLimit || 0,
            classes: item.classes || '',
            groupName: item.groupName || ''
          }));
        } else {
          this.cardConsumptions = [];
        }
      } catch (error) {
        console.error('获取饭卡消费数据失败:', error);
        this.cardConsumptions = [];
      }
    },

    // 加载内务得分数据
    async loadDormitoryScores() {
      try {
        // 使用student.js封装的API请求内务数据
        const response = await this.$studentapi.getLifeHousekeeping({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.dormitoryScores = response.data.map(item => ({
            checkDate: item.checkDate || '',
            quality: item.quality || '',
            placement: item.placement || '',
            clean: item.clean || '',
            score: item.score || '',
            classes: item.classes || '',
            groupName: item.groupName || ''
          }));
        } else {
          this.dormitoryScores = [];
        }
      } catch (error) {
        console.error('获取内务数据失败:', error);
        this.dormitoryScores = [];
      }
    },

    // 加载公差次数数据
    async loadDutyRecords() {
      try {
        // 使用student.js封装的API请求公差数据
        const response = await this.$studentapi.getLifeBusiness({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.dutyRecords = response.data.map(item => ({
            businessDate: item.businessDate || '',
            businessRecord: item.businessRecord || '',
            classes: item.classes || '',
            groupName: item.groupName || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.dutyRecords = [];
        }
      } catch (error) {
        console.error('获取公差数据失败:', error);
        this.dutyRecords = [];
      }
    },

    // 加载请假数据
    async loadLeaveRecords() {
      try {
        // 使用student.js封装的API请求请假数据
        const response = await this.$studentapi.getLifeLeave({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.leaveRecords = response.data.map(item => ({
            leaveDate: item.leaveDate || '',
            reason: item.reason || '',
            leaveTime: item.leaveTime || '',
            classes: item.classes || '',
            groupName: item.groupName || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.leaveRecords = [];
        }
      } catch (error) {
        console.error('获取请假数据失败:', error);
        this.leaveRecords = [];
      }
    },

    // 加载外出数据
    async loadOutingRecords() {
      try {
        // 使用student.js封装的API请求外出数据
        const response = await this.$studentapi.getLifeOut({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.outingRecords = response.data.map(item => ({
            outDate: item.outDate || '',
            outDuration: item.outDuration || '',
            outDestination: item.outDestination || '',
            classes: item.classes || '',
            groupName: item.groupName || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.outingRecords = [];
        }
      } catch (error) {
        console.error('获取外出数据失败:', error);
        this.outingRecords = [];
      }
    },

    // 获取质量等级的样式类
    getQualityClass(quality) {
      if (!quality) return '';

      switch (quality) {
        case '优':
          return 'quality-excellent';
        case '中':
          return 'quality-medium';
        case '差':
          return 'quality-poor';
        default:
          return '';
      }
    },

    // 获取分数的样式类
    getScoreClass(score) {
      if (!score) return '';

      const numScore = parseInt(score);
      if (isNaN(numScore)) return '';

      if (numScore >= 80) return 'score-excellent';
      if (numScore >= 70) return 'score-good';
      if (numScore >= 60) return 'score-medium';
      return 'score-poor';
    },

    // 获取记录的样式类
    getRecordClass(record) {
      if (!record) return '';

      if (record === '有') return 'record-problem';
      return '';
    },

    // 获取体测等级的样式类
    getPhysicalGradeClass(grade) {
      if (!grade) return '';

      switch (grade) {
        case '优秀':
          return 'grade-excellent';
        case '良好':
          return 'grade-good';
        case '及格':
          return 'grade-pass';
        case '不及格':
          return 'grade-fail';
        default:
          return '';
      }
    },

    // 加载思想模块数据
    async loadThoughtModuleData() {
      if (!this.student) return;

      try {
        // 加载军容风纪检查数据
        await this.loadJunrongRecords();

        // 加载纠察记录数据
        await this.loadJiuchaRecords();

        // 加载苞米检查数据
        await this.loadBaomiRecords();
      } catch (error) {
        console.error('加载思想模块数据出错:', error);
      }
    },

    // 加载军容风纪检查数据
    async loadJunrongRecords() {
      try {
        // 使用student.js封装的API请求军容风纪检查数据
        const response = await this.$studentapi.getThoughtJRFJ({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.junrongRecords = response.data.map(item => ({
            jrfjDate: item.jrfjDate || '',
            reason: item.reason || '',
            classes: item.classes || '',
            groupName: item.groupName || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.junrongRecords = [];
        }
      } catch (error) {
        console.error('获取军容风纪检查数据失败:', error);
        this.junrongRecords = [];
      }
    },

    // 加载纠察记录数据
    async loadJiuchaRecords() {
      try {
        // 使用student.js封装的API请求纠察数据
        const response = await this.$studentapi.getThoughtPicket({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.jiuchaRecords = response.data.map(item => ({
            id: item.id || '',
            时间: item.picketDate || item.createDate || '',
            事项: item.item || '',
            classes: item.classes || '',
            组别: item.groupName || '',
            name: item.name || '',
            ...item // 包含所有其他字段
          }));
          console.log('纠察记录:', this.jiuchaRecords);
        } else {
          console.error('获取纠察记录数据失败或返回格式不正确');
          // 使用模拟数据
          this.jiuchaRecords = [
            { id: 'mock_id_1', 时间: '2025410', 事项: '配饰不齐', classes: this.student.classes || '1', 组别: this.student.组别 || '1', name: this.student.name || '' }
          ];
        }
      } catch (error) {
        console.error('加载纠察记录数据出错:', error);
        // 使用模拟数据
        this.jiuchaRecords = [
          { id: 'mock_id_1', 时间: '2025410', 事项: '配饰不齐', classes: this.student.classes || '1', 组别: this.student.组别 || '1', name: this.student.name || '' }
        ];
      }
    },

    // 加载苞米检查数据
    async loadBaomiRecords() {
      try {
        // 使用student.js封装的API请求保密检查数据
        const response = await this.$studentapi.getThoughtSecurity({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.baomiRecords = response.data.map(item => ({
            chat: item.chat || 'None',
            photoalbum: item.photoalbum || 'None',
            hotissue: item.hotissue || 'None',
            badrecord: item.badrecord || 'None',
            climbingrecord: item.climbingrecord || 'None',
            other: item.other || 'None',
            checktime: item.checktime || '',
            classes: item.classes || '',
            groupName: item.groupName || ''
          }));
        } else {
          this.baomiRecords = [];
        }
      } catch (error) {
        console.error('获取保密检查数据失败:', error);
        this.baomiRecords = [];
      }
    },

    // 加载参与活动数据
    async loadActivities() {
      try {
        // 使用student.js封装的API请求活动数据
        const response = await this.$studentapi.getSocialActivities({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.activities = response.data.map(item => ({
            activityName: item.activityName || '',
            activityDate: item.activityDate || '',
            classes: item.classes || '',
            groupName: item.groupName || ''
          }));
        } else {
          this.activities = [];
        }
      } catch (error) {
        console.error('获取活动数据失败:', error);
        this.activities = [];
      }
    },

    // 加载学科成绩
    async loadSubjectScores() {
      try {
        // 使用student.js封装的API请求个人学科成绩
        const response = await this.$studentapi.getStudyScore({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.subjectScores = response.data.map(item => ({
            subject: item.subject || '',
            major: item.major || '',
            rank: item.rank || '',
            score: item.score || '',
            examName: item.examName || '',
            examTime: item.examTime || '',
            groupName: item.groupName || ''
          }));
        } else {
          this.subjectScores = [];
        }
      } catch (error) {
        console.error('获取学科成绩失败:', error);
        this.subjectScores = [];
      }
    },

    // 加载作业评级
    async loadHomeworkGrades() {
      try {
        // 使用student.js封装的API请求作业评级数据
        const response = await this.$studentapi.getStudyHomework({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.homeworkGrades = response.data.map(item => ({
            subject: item.subject || '',
            homeworkGrade: item.homeworkGrade || '',
            homeworkNode: item.homeworkNode || '',
            classes: item.classes || '',
            groupName: item.groupName || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.homeworkGrades = [];
        }
      } catch (error) {
        console.error('获取作业评级失败:', error);
        this.homeworkGrades = [];
      }
    },

    // 加载自主学术讲座
    async loadLectures() {
      try {
        // 使用student.js封装的API请求自主学习讲座数据
        const response = await this.$studentapi.getLectures({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.lectures = response.data.map(item => ({
            lectureDate: item.lectureDate || '',
            topic: item.topic || '',
            classes: item.classes || '',
            groupName: item.groupName || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.lectures = [];
        }
      } catch (error) {
        console.error('获取自主学习讲座失败:', error);
        this.lectures = [];
      }
    },

    // 加载图书馆记录
    async loadLibraryRecords() {
      try {
        // 使用student.js封装的API请求图书馆记录数据
        const response = await this.$studentapi.getStudyLibrary({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.libraryRecords = response.data.map(item => ({
            enterDate: item.enterDate || '',
            enterTime: item.enterTime || '',
            classes: item.classes || '',
            groupName: item.groupName || ''
          }));
        } else {
          this.libraryRecords = [];
        }
      } catch (error) {
        console.error('获取图书馆记录失败:', error);
        this.libraryRecords = [];
      }
    },

    // 加载晚加班记录
    async loadOvertimeRecords() {
      try {
        // 使用student.js封装的API请求晚加班记录数据
        const response = await this.$studentapi.getOvertimeRecords({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" ) {
          // 适配后端返回的数据结构
          this.overtimeRecords = response.data.map(item => ({
            groupName: item.groupName || '',
            classes: item.classes || '',
            overTime: item.overTime || '',
            overPlace: item.overPlace || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.overtimeRecords = [];
        }
      } catch (error) {
        console.error('获取晚加班记录失败:', error);
        this.overtimeRecords = [];
      }
    },

    // 加载回答问题记录
    async loadQuestionAnswers() {
      try {
        // 使用student.js封装的API请求主动回答问题数据
        const response = await this.$studentapi.getStudyProactive({
          name: this.student.name,
          classes: this.student.classes
        });

        if (response && response.code === "200" && Array.isArray(response.data)) {
          // 适配后端返回的数据结构
          this.questionAnswers = response.data.map(item => ({
            course: item.course || '',
            answerCount: item.answerCount || 0,
            classes: item.classes || '',
            groupName: item.groupName || '',
            proactiveDate: item.proactiveDate || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.questionAnswers = [];
        }
      } catch (error) {
        console.error('获取主动回答问题记录失败:', error);
        this.questionAnswers = [];
      }
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';

      // 处理 2025.4.10 格式
      if (dateStr.includes('.')) {
        return dateStr;
      }

      // 处理 20250410 格式
      if (dateStr.length === 8) {
        const year = dateStr.substring(0, 4);
        const month = dateStr.substring(4, 6);
        const day = dateStr.substring(6, 8);
        return `${year}.${parseInt(month)}.${parseInt(day)}`;
      }

      return dateStr;
    },

    // 获取作业等级的样式类
    getHomeworkGradeClass(grade) {
      if (!grade) return '';

      switch (grade.toUpperCase()) {
        case 'A+':
          return 'grade-a-plus';
        case 'A':
          return 'grade-a';
        case 'B':
          return 'grade-b';
        case 'C':
          return 'grade-c';
        case '阅':
          return 'grade-read';
        default:
          return '';
      }
    },

    // 显示学习模块说明提示
    showStudyTooltip() {
      this.studyTooltipVisible = true;
    },

    // 隐藏学习模块说明提示
    hideStudyTooltip() {
      this.studyTooltipVisible = false;
    },

    // 加载学习模块说明文本
    async loadStudyInfoText() {
      try {
        const response = await fetch('/tltl.txt');
        if (response.ok) {
          const text = await response.text();
          // 提取"2、"后面的文本，直到下一个序号或文件结束
          const regex = /2、(.*?)(?=\s*\d+、|$)/s;
          const match = text.match(regex);
          if (match && match[1]) {
            this.studyInfoText = match[1].trim();
            console.log('学习模块说明文本:', this.studyInfoText);
          } else {
            console.error('未找到学习模块说明文本');
            this.studyInfoText = '学习是学员成长发展的核心要素，包括学科成绩、作业评级、自主学术讲座参与情况、图书馆学习记录、晚加班学习情况以及课堂回答问题表现等多个维度。';
          }
        } else {
          console.error('加载学习模块说明文本失败');
          this.studyInfoText = '学习是学员成长发展的核心要素，包括学科成绩、作业评级、自主学术讲座参与情况、图书馆学习记录、晚加班学习情况以及课堂回答问题表现等多个维度。';
        }
      } catch (error) {
        console.error('加载学习模块说明文本出错:', error);
        this.studyInfoText = '学习是学员成长发展的核心要素，包括学科成绩、作业评级、自主学术讲座参与情况、图书馆学习记录、晚加班学习情况以及课堂回答问题表现等多个维度。';
      }
    },

    // 加载健康模块说明文本
    async loadHealthInfoText() {
      try {
        const response = await fetch('/tltl.txt');
        if (response.ok) {
          const text = await response.text();
          // 提取"4、"后面的文本，直到下一个序号或文件结束
          const regex = /4、(.*?)(?=\s*\d+、|$)/s;
          const match = text.match(regex);
          if (match && match[1]) {
            this.healthInfoText = match[1].trim();
            console.log('健康模块说明文本:', this.healthInfoText);
          } else {
            console.error('未找到健康模块说明文本');
            this.healthInfoText = '第二百一十条  军人患病，应当及时将病情报告直接首长，经批准前往就医，由经治医师决定门诊、住院或者回队治疗，并根据病情开具相关证明。对急症病人，军队医疗卫生机构应当随时诊治。';
          }
        } else {
          console.error('加载健康模块说明文本失败');
          this.healthInfoText = '第二百一十条  军人患病，应当及时将病情报告直接首长，经批准前往就医，由经治医师决定门诊、住院或者回队治疗，并根据病情开具相关证明。对急症病人，军队医疗卫生机构应当随时诊治。';
        }
      } catch (error) {
        console.error('加载健康模块说明文本出错:', error);
        this.healthInfoText = '第二百一十条  军人患病，应当及时将病情报告直接首长，经批准前往就医，由经治医师决定门诊、住院或者回队治疗，并根据病情开具相关证明。对急症病人，军队医疗卫生机构应当随时诊治。';
      }
    },

    // 加载作风养成模块说明文本
    async loadThoughtInfoText() {
      try {
        const response = await fetch('/tltl.txt');
        if (response.ok) {
          const text = await response.text();
          // 提取"5、"后面的文本，直到下一个序号或文件结束
          const regex = /5、(.*?)(?=\s*\d+、|$)/s;
          const match = text.match(regex);
          if (match && match[1]) {
            this.thoughtInfoText = match[1].trim();
            console.log('作风养成模块说明文本:', this.thoughtInfoText);
          } else {
            console.error('未找到作风养成模块说明文本');
            this.thoughtInfoText = '第二百一十三条  军队单位应当重视心理健康服务，组织经常性心理健康教育，做好心理评估、心理咨询和心理训练等工作；发现精神心理障碍或者疑似人员，应当及时送诊就医。';
          }
        } else {
          console.error('加载作风养成模块说明文本失败');
          this.thoughtInfoText = '第二百一十三条  军队单位应当重视心理健康服务，组织经常性心理健康教育，做好心理评估、心理咨询和心理训练等工作；发现精神心理障碍或者疑似人员，应当及时送诊就医。';
        }
      } catch (error) {
        console.error('加载思想模块说明文本出错:', error);
        this.thoughtInfoText = '第二百一十三条  军队单位应当重视心理健康服务，组织经常性心理健康教育，做好心理评估、心理咨询和心理训练等工作；发现精神心理障碍或者疑似人员，应当及时送诊就医。';
      }
    },

    goBack() {
      this.$router.push('/personal-profile');
    }
  }
};
</script>

<style lang="scss">
@import '../assets/scss/common.scss';

.student-detail {
  background: url('~@/assets/pageBg.png') no-repeat center center;
  background-size: cover;
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 30px;
  font-size: 18px !important;

  * {
    font-size: 18px !important;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 28px !important;
  }

  .card-header h3 {
    font-size: 22px !important;
  }

  .table-header {
    font-size: 18px !important;
  }

  .table-cell {
    font-size: 17px !important;
  }

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .back-button {
      background-color: rgba(104, 216, 254, 0.2);
      color: #68d8fe;
      border: 1px solid rgba(104, 216, 254, 0.5);
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 20px;
      display: flex;
      align-items: center;
      transition: all 0.3s;
      font-size: 18px !important;

      i {
        margin-right: 5px;
      }

      &:hover {
        background-color: rgba(104, 216, 254, 0.3);
        border-color: rgba(104, 216, 254, 0.8);
      }
    }

    h2 {
      color: #68d8fe;
      margin: 0;
      font-size: 32px !important;
    }
  }

  .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;

    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 3px solid rgba(104, 216, 254, 0.3);
      border-radius: 50%;
      border-top-color: #68d8fe;
      animation: spin 1s linear infinite;
      margin-bottom: 20px;
    }

    p {
      color: #d3d6dd;
      font-size: 18px !important;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  }

  .not-found {
    text-align: center;
    padding: 50px;
    background-color: rgba(19, 25, 47, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(255, 107, 107, 0.5);

    p {
      color: #ff6b6b;
      font-size: 22px !important;
      margin-bottom: 20px;
    }
  }

  .detail-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    max-width: 100%;
    overflow-x: hidden;

    .info-card {
      background-color: rgba(19, 25, 47, 0.8);
      border-radius: 4px;
      border: 1px solid rgba(104, 216, 254, 0.3);
      overflow: hidden;

      .card-header {
        background-color: rgba(104, 216, 254, 0.1);
        padding: 15px;
        border-bottom: 1px solid rgba(104, 216, 254, 0.3);
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
          color: #68d8fe;
          margin: 0;
          font-size: 22px !important;
        }

        .header-left {
          display: flex;
          align-items: center;
          gap: 10px;

          .study-info-btn {
            background-color: rgba(104, 216, 254, 0.2);
            border: 1px solid rgba(104, 216, 254, 0.5);
            color: #68d8fe;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background-color: rgba(104, 216, 254, 0.3);
              border-color: rgba(104, 216, 254, 0.8);
              transform: scale(1.05);
            }

            i {
              font-size: 16px;
            }
          }
        }

        .record-count {
          color: #d3d6dd;
          font-size: 18px !important;
        }
      }

      .card-body {
        padding: 15px;
        max-height: 350px;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-track {
          background: rgba(19, 25, 47, 0.5);
          border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
          background-color: rgba(104, 216, 254, 0.5);
          border-radius: 3px;
        }

        .info-item {
          margin-bottom: 10px;
          display: flex;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: #68d8fe;
            width: 100px;
            flex-shrink: 0;
            font-size: 18px !important;
          }

          .value {
            color: #d3d6dd;
            font-size: 18px !important;

            &.is-league {
              color: #67c23a;
            }

            &.not-league {
              color: #909399;
            }
          }
        }

        .no-data {
          color: #909399;
          text-align: center;
          padding: 20px;
          font-style: italic;
          font-size: 18px !important;
        }

        .radar-container, .line-container {
          width: 100%;
          height: 280px;
          position: relative;
          z-index: 10;
        }

        .debug-buttons {
          display: flex;
          justify-content: center;
          margin-top: 10px;
        }

        .debug-button {
          background-color: rgba(104, 216, 254, 0.2);
          border: 1px solid rgba(104, 216, 254, 0.5);
          color: #68d8fe;
          padding: 5px 10px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 12px;
          transition: all 0.3s;

          &:hover {
            background-color: rgba(104, 216, 254, 0.4);
          }
        }
      }
    }

    .basic-info {
      grid-column: span 1;

      .card-header h3 {
        font-size: 26px !important;
      }

      .info-item {
        .label {
          font-size: 20px !important;
        }

        .value {
          font-size: 20px !important;
        }
      }
    }

    .radar-chart, .line-chart {
      grid-column: span 1;

      .card-header h3 {
        font-size: 26px !important;
      }

      .radar-container, .line-container {
        font-size: 20px !important;

        * {
          font-size: 20px !important;
        }
      }
    }

    .dimension-card {
      grid-column: 1 / -1; /* 从第一列到最后一列，使其占据整行 */
    }

    .records-table, .sports-table {
      .table-header {
        display: flex;
        background-color: rgba(104, 216, 254, 0.1);
        border-bottom: 2px solid rgba(104, 216, 254, 0.5);
        padding: 10px 0;
        font-weight: bold;
        color: #68d8fe;
        font-size: 20px !important;
      }

      .table-body {
        max-height: 250px;
        overflow-y: auto;

        &.custom-scrollbar {
          scrollbar-width: thin;
          scrollbar-color: #68d8fe rgba(19,25,47,0.3);
        }
        &::-webkit-scrollbar {
          width: 8px;
          background: rgba(19,25,47,0.3);
          border-radius: 8px;
        }
        &::-webkit-scrollbar-thumb {
          background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
          border-radius: 8px;
        }
        &::-webkit-scrollbar-track {
          background: rgba(19,25,47,0.3);
          border-radius: 8px;
        }
      }

      .table-row {
        display: flex;
        border-bottom: 1px solid rgba(104, 216, 254, 0.2);
        padding: 10px 0;

        &:last-child {
          border-bottom: none;
        }

        &.passed {
          background-color: rgba(103, 194, 58, 0.05);

          .pass-cell {
            color: #67c23a;
          }
        }

        &.failed {
          background-color: rgba(245, 108, 108, 0.05);

          .pass-cell {
            color: #f56c6c;
          }
        }

        .hospitalized {
          color: #f56c6c;
        }
      }

      .table-cell {
        padding: 0 10px;
        color: #d3d6dd;
        font-size: 19px !important;
      }
    }

    .records-table {
      .date-cell {
        width: 120px;
      }

      .reason-cell {
        flex: 1;
      }

      .hospitalized-cell {
        width: 100px;
        text-align: center;
      }
    }

    .sports-table {
      .project-cell,
      .score-cell,
      .rank-cell,
      .pass-cell {
        flex: 1;
        text-align: center;
      }
    }

    .exam-table {
      .table-header {
        display: flex;
        background-color: rgba(104, 216, 254, 0.1);
        border-bottom: 2px solid rgba(104, 216, 254, 0.5);
        padding: 10px 0;
        font-weight: bold;
        color: #68d8fe;
        font-size: 20px !important;
      }

      .table-body {
        max-height: 250px;
        overflow-y: auto;

        &.custom-scrollbar {
          scrollbar-width: thin;
          scrollbar-color: #68d8fe rgba(19,25,47,0.3);
        }
        &::-webkit-scrollbar {
          width: 8px;
          background: rgba(19,25,47,0.3);
          border-radius: 8px;
        }
        &::-webkit-scrollbar-thumb {
          background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
          border-radius: 8px;
        }
        &::-webkit-scrollbar-track {
          background: rgba(19,25,47,0.3);
          border-radius: 8px;
        }
      }

      .table-row {
        display: flex;
        border-bottom: 1px solid rgba(104, 216, 254, 0.2);
        padding: 10px 0;

        &:last-child {
          border-bottom: none;
        }

        &.total-row {
          background-color: rgba(104, 216, 254, 0.1);
          font-weight: bold;

          .subject-cell {
            color: #68d8fe;
          }
        }
      }

      .table-cell {
        padding: 0 10px;
        color: #d3d6dd;
        font-size: 19px !important;
      }

      .subject-cell,
      .score-cell,
      .rank-cell {
        flex: 1;
        text-align: center;
      }
    }

    // 维度模块样式
    .dimension-card {
      .dimension-header {
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background-color: rgba(104, 216, 254, 0.15);
        }

        .dimension-stats {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-left: auto;
          margin-right: 15px;

          .dimension-score {
            color: #d3d6dd;
            font-size: 20px !important;
          }

          .dimension-status {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 18px !important;
            font-weight: bold;

            &.status-good {
              background-color: rgba(103, 194, 58, 0.2);
              color: #67c23a;
            }

            &.status-normal {
              background-color: rgba(144, 147, 153, 0.2);
              color: #909399;
            }

            &.status-low-risk {
              background-color: rgba(230, 162, 60, 0.2);
              color: #e6a23c;
            }

            &.status-risk {
              background-color: rgba(245, 108, 108, 0.2);
              color: #f56c6c;
            }
          }
        }

        .toggle-icon {
          color: #68d8fe;
          transition: transform 0.3s;

          i {
            font-size: 16px;
          }
        }
      }

      .dimension-content {
        padding: 10px 0;

        .placeholder-content {
          color: #909399;
          text-align: center;
          padding: 20px;
          font-style: italic;
          background-color: rgba(19, 25, 47, 0.4);
          border-radius: 4px;
          border: 1px dashed rgba(104, 216, 254, 0.3);
          font-size: 20px !important;
        }
      }
    }

    .exam-type-selector {
      display: flex;
      align-items: center;

      .label {
        color: #d3d6dd;
        margin-right: 10px;
        font-size: 20px !important;
      }

      .selector-buttons {
        display: flex;

        button {
          background-color: rgba(19, 25, 47, 0.5);
          border: 1px solid rgba(104, 216, 254, 0.3);
          color: #d3d6dd;
          padding: 5px 10px;
          margin-right: 5px;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s;
          font-size: 19px !important;

          &:hover {
            background-color: rgba(104, 216, 254, 0.2);
          }

          &.active {
            background-color: rgba(104, 216, 254, 0.3);
            border-color: rgba(104, 216, 254, 0.8);
            color: #68d8fe;
          }
        }
      }
    }

    // 学习模块、社交模块、生活模块、思想模块和健康模块共用样式
    .study-section, .social-section, .life-section, .thought-section, .health-section {
      margin-bottom: 25px;

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        color: #68d8fe;
        font-size: 20px !important;
        margin-bottom: 10px;
        padding-left: 10px;
        border-left: 3px solid #68d8fe;
      }

      .table-container {
        background-color: rgba(19, 25, 47, 0.5);
        border-radius: 4px;
        overflow: hidden;
      }

      .study-table, .social-table, .life-table, .thought-table, .health-table {
        width: 100%;

        .table-header {
          display: flex;
          background-color: rgba(104, 216, 254, 0.1);
          border-bottom: 2px solid rgba(104, 216, 254, 0.5);
          padding: 10px 0;
          font-weight: bold;
          color: #68d8fe;
          font-size: 18px !important;
        }

        .table-body {
          max-height: 200px;
          overflow-y: auto;

          &.custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: #68d8fe rgba(19,25,47,0.3);
          }
          &::-webkit-scrollbar {
            width: 8px;
            background: rgba(19,25,47,0.3);
            border-radius: 8px;
          }
          &::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
            border-radius: 8px;
          }
          &::-webkit-scrollbar-track {
            background: rgba(19,25,47,0.3);
            border-radius: 8px;
          }
        }

        .table-row {
          display: flex;
          border-bottom: 1px solid rgba(104, 216, 254, 0.2);
          padding: 10px 0;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background-color: rgba(104, 216, 254, 0.05);
          }
        }

        .table-cell {
          padding: 0 10px;
          color: #d3d6dd;
          display: flex;
          align-items: center;
          font-size: 17px !important;
        }

        // 学科成绩表格
        .subject-cell, .major-cell, .rank-cell, .score-cell, .exam-cell {
          flex: 1;
        }

        // 作业评级表格
        .grade-cell {
          flex: 1;
          font-weight: bold;

          &.grade-a-plus {
            color: #67c23a;
          }

          &.grade-a {
            color: #409eff;
          }

          &.grade-b {
            color: #e6a23c;
          }

          &.grade-c {
            color: #f56c6c;
          }

          &.grade-read {
            color: #909399;
          }
        }

        .class-cell, .group-cell, .node-cell {
          flex: 1;
        }

        // 讲座表格
        .date-cell {
          flex: 1;
        }

        .lecture-cell {
          flex: 2;
        }

        // 图书馆表格
        .time-cell {
          flex: 1;
        }

        .borrow-cell, .return-cell {
          flex: 2;
        }

        // 晚加班表格
        .location-cell {
          flex: 2;
        }

        // 回答问题表格
        .course-cell, .count-cell {
          flex: 1;
        }

        // 社交模块 - 参与活动表格
        .activity-name-cell {
          flex: 2;
        }

        .activity-time-cell {
          flex: 1;
        }

        // 生活模块 - 饭卡消费表格
        .time-cell, .amount-cell {
          flex: 1;
        }

        // 生活模块 - 内务得分表格
        .date-cell {
          flex: 1;
        }

        .quality-cell, .placement-cell, .hygiene-cell, .score-cell {
          flex: 1;
          text-align: center;
        }

        // 生活模块 - 公差次数表格
        .record-cell {
          flex: 1;
        }

        // 生活模块 - 请假表格
        .reason-cell {
          flex: 1;
        }

        // 生活模块 - 外出表格
        .duration-cell {
          flex: 1;
        }

        .destination-cell {
          flex: 2;
        }

        // 质量等级样式
        .quality-excellent {
          color: #67c23a;
          font-weight: bold;
        }

        .quality-medium {
          color: #e6a23c;
        }

        .quality-poor {
          color: #f56c6c;
        }

        // 分数等级样式
        .score-excellent {
          color: #67c23a;
          font-weight: bold;
        }

        .score-good {
          color: #409eff;
        }

        .score-medium {
          color: #e6a23c;
        }

        .score-poor {
          color: #f56c6c;
        }

        // 思想模块 - 荣风机检查表格
        .reason-cell {
          flex: 2;
        }

        // 思想模块 - 纠察记录表格
        .item-cell {
          flex: 2;
        }

        // 思想模块 - 苞米检查表格
        .chat-cell, .photo-cell, .location-cell, .bad-record-cell, .wall-cell, .other-cell {
          flex: 1;
          text-align: center;
        }

        .check-time-cell {
          flex: 1;
        }

        // 记录问题样式
        .record-problem {
          color: #f56c6c;
          font-weight: bold;
        }

        // 健康模块 - 体测成绩表格
        .test-name-cell, .test-date-cell {
          flex: 1;
        }

        .run-cell, .pullup-cell, .situp-cell, .snake-cell, .parallel-cell {
          flex: 1;
          text-align: center;
        }

        // 健康模块 - 988就诊表格
        .cause-cell {
          flex: 2;
        }

        // 体测等级样式
        .grade-excellent {
          color: #67c23a;
          font-weight: bold;
        }

        .grade-good {
          color: #409eff;
        }

        .grade-pass {
          color: #e6a23c;
        }

        .grade-fail {
          color: #f56c6c;
        }
      }
    }
  }
}

.student-detail .custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #68d8fe rgba(19,25,47,0.3);
}
.student-detail .custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  background: rgba(19,25,47,0.3);
  border-radius: 8px;
}
.student-detail .custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
  border-radius: 8px;
}
.student-detail .custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(19,25,47,0.3);
  border-radius: 8px;
}

// 学习模块说明提示样式
.study-info-btn-container {
  position: relative;
  display: inline-block;

  .study-tooltip-popup {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(29, 33, 39, 0.95);
    border: 1px solid #68d8fe;
    border-radius: 8px;
    padding: 16px 20px;
    color: #d3d6dd;
    font-size: 16px;
    line-height: 1.6;
    max-width: 500px;
    min-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(104, 216, 254, 0.3);
    z-index: 9999;
    backdrop-filter: blur(10px);
    animation: fadeInDown 0.3s ease;
    text-align: justify;
    letter-spacing: 0.5px;
  }
}

// 健康模块说明提示样式
.health-info-btn-container {
  position: relative;
  display: inline-block;
  margin-left: 8px;

  .health-info-btn {
    background-color: rgba(104, 216, 254, 0.2);
    border: 1px solid rgba(104, 216, 254, 0.5);
    color: #68d8fe;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: rgba(104, 216, 254, 0.3);
      border-color: rgba(104, 216, 254, 0.8);
      transform: scale(1.05);
    }

    &:focus {
      outline: none;
    }

    i {
      font-size: 16px;
    }
  }

  .health-tooltip-popup {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(29, 33, 39, 0.95);
    border: 1px solid #68d8fe;
    border-radius: 8px;
    padding: 16px 20px;
    color: #d3d6dd;
    font-size: 16px;
    line-height: 1.6;
    max-width: 500px;
    min-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(104, 216, 254, 0.3);
    z-index: 9999;
    backdrop-filter: blur(10px);
    animation: fadeInDown 0.3s ease;
    text-align: justify;
    letter-spacing: 0.5px;
  }
}

// 思想模块说明提示样式
.thought-info-btn-container {
  position: relative;
  display: inline-block;
  margin-left: 8px;

  .thought-info-btn {
    background-color: rgba(104, 216, 254, 0.2);
    border: 1px solid rgba(104, 216, 254, 0.5);
    color: #68d8fe;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: rgba(104, 216, 254, 0.3);
      border-color: rgba(104, 216, 254, 0.8);
      transform: scale(1.05);
    }

    &:focus {
      outline: none;
    }

    i {
      font-size: 16px;
    }
  }

  .thought-tooltip-popup {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(29, 33, 39, 0.95);
    border: 1px solid #68d8fe;
    border-radius: 8px;
    padding: 16px 20px;
    color: #d3d6dd;
    font-size: 16px;
    line-height: 1.6;
    max-width: 500px;
    min-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(104, 216, 254, 0.3);
    z-index: 9999;
    backdrop-filter: blur(10px);
    animation: fadeInDown 0.3s ease;
    text-align: justify;
    letter-spacing: 0.5px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

</style>
